<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('批量研发打卡')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
    <script src="https://unpkg.com/vue@3.2.27/dist/vue.global.js"></script>
    <!-- 导入样式 -->
  	<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  	<!-- 导入组件库 -->
    <script src="//unpkg.com/element-plus"></script>
    <!-- axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
    
    <style>
    	.row {
    		display:flex;
    		flex-direction:row;
    		/*
    		justify-content:center;
    		align-items:center;
    		*/
    	}
    	.row-ai-c {
    		align-items:center;
    	}
    	.row-jc-sb {
    		justify-content: space-between;
    	}
    	.row-jc-sa {
    		justify-content: space-around;
    	}
    	
    	
    	.column {
    	    display:flex;
    		flex-direction:column;
    		/*
    		justify-content:center;
    		align-items:center;
    		*/
    	}
    	.column-ai-c {
    		align-items:center;
    	}
    	
    	/* ------------------------- */
    	.col-aw-sb-ct-0 {
    		width:auto;
    	    display: flex;
    		flex-direction: column;
    		justify-content: space-between;
    		align-items: center;
    		flex-grow: 0;
    	}
    	.col-fw-sa-fs-1 {
    		width:100%;
    	    display: flex;
    		flex-direction: column;
    		justify-content: space-around;
    		align-items: flex-start;
    		flex-grow: 1;
    	}
    	.row-fw-sb-ct-0 {
    		width: 100%;
    	    display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		align-items: center;
    		flex-grow: 0;
    	}
    	.row-fw-sb-ct-1 {
    		width: 100%;
    	    display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		align-items: center;
    		flex-grow: 1;
    	}
    	
    	/* ------------------------------- */
    	.icon {
    		background-repeat: no-repeat;
    		background-position: center;
    		background-size: cover;
    	}
    	.i-sm {
    		width: calc(14.58px * 0.5);
    		height: calc(26.7px * 0.5);
    	}
    	.i-md {
    		width: calc(24px * 1);
    		height: calc(24px * 1);
    	}
    	.i-arrow-right {
    		background-image: url("/icon/arrow_right.png");
    	}
    	.i-iconography_caesarzkn {
    		background-image: url("/icon/icon2.png");
    	}
    </style>
    <style>
    	* {
    		padding: 0px;
    		margin: 0px;
    	}
    	html, body, #app {
    		padding: 0px;
    		margin: 0px;
    		height: 100%;
    	}
    	body {
    		background-color:#E9E9E9;
    	}
    	
    	#app {
    		display:flex;
    		flex-direction:column;
    	}
    	
    	.title-bar {
    		text-align:center;
    		background-color:#66CE57;
    		height:50px;
    		line-height:50px;
    		width:100%;
    		color:white;
    	}
    	
    	.content-area {
    		display:flex;
    		flex-direction:column;
    		align-items:center;
    		flex-grow:1;
    	}
    	.project-sel {
    		background-color:#E9E9E9;
    		width:100%;
    		height:60px;
    		padding-top:10px;
    		padding-bottom:10px;
    		padding-left: 20px;
    		padding-right: 20px;
    	}
    	.project-sel1 {
    		background-color:#E9E9E9;
    		width:100%;
    		height:auto;
    		padding-top:10px;
    		padding-bottom:10px;
    		padding-left: 20px;
    		padding-right: 20px;
    	}
    	.sel-item {
    		background-color:red;
    	}
    	
    	.selector {
    		background:none;
    		background-color:transparent;
    		flex-grow:1;
    		margin-left:10px;
    		margin-right:10px;
    	}
    	
    	.el-select .el-select__tags-text {
		    justify-content: flex-start !important;
		}
    	
    	.el-date-editor {
    		width: 100% !important;
    	}
    	.el-date-editor .el-input__inner {
		    padding-left: 12px !important;
		}
		.el-date-editor .el-input__prefix {
			display:none;
		}
    	
    	.el-input__inner {
    		border:none !important;
    		background-color:transparent; 
    		background:none;
    		padding-left: 0px;
    		padding-right: 0px !important;
    	}
    	.el-input__suffix{
    		display:none;
    	}
    </style>
    
    <style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
</head>

<body>
    <div id="app">
	  <div class="title-bar">
	  	批量人员打卡
	  </div>
	  <div class="content-area">
		  <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;">
		     <div class="icon i-md i-iconography_caesarzkn"></div>
		     <el-select filterable :change="projectSelect" v-model="personProjectId" :suffix-icon="ArrowDown" placeholder="Select" class="selector">
			    <el-option
			      v-for="item in projects"
			      :key="item.id"
			      :label="item.text"
			      :value="item.id"
			    >
			    </el-option>
			  </el-select>
		    <div class="icon i-sm i-arrow-right" style=""></div>
		  </div>
		  
		  <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;">
		     <div class="icon i-md i-iconography_caesarzkn" style=""></div>
		     <el-date-picker value-format="YYYY-MM-DD" :change="dateSelect()" v-model="clockdatetime" type="date" placeholder="Pick a day"></el-date-picker>
		     <div class="icon i-sm i-arrow-right" style=""></div>
		  </div>
		  
		  <div class="project-sel1 row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;">
		     <div class="icon i-md i-iconography_caesarzkn"></div>
		     <el-select filterable :filter-method="persionFilter"  :change="persionSelect" v-model="personIds" multiple :suffix-icon="ArrowDown" placeholder="请选择人员（支持搜索）" class="selector">
			    <el-option
			      v-for="item in persionsOptions"
			      :key="item.id"
			      :label="item.text"
			      :value="item.id"
			    >
			    </el-option>
			  </el-select>
		    <div class="icon i-sm i-arrow-right" style=""></div>
		  </div>
		  
		  <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;">
		     <div class="icon i-md i-iconography_caesarzkn" style=""></div>
		     <el-time-picker v-model="clockdatetime2" placeholder="请选择打卡时间"></el-time-picker>
		     <el-tag type="info">打卡时间</el-tag>
		  </div>
		  
		  <div class="col-fw-sa-fs-1" style="border-bottom: 1px dashed #D3D3D3;display:none;">
		  	<div class="row-fw-sb-ct-1" style="background-color:#E7E7E7; padding: 15px;">
			  	<div class="col-aw-sb-ct-0" style="">
			  		<div style="font-size: 32px;color:#67CE57">{{ shangbanTime }}</div>
			  		<div style="font-size: 18px;color: #ADC8A9;">{{ sbstatus }}</div>
			  	</div>
			  	<el-switch
			    	v-model="value2"
			    	active-color="#13ce66"
			    	inactive-color="#ff4949"
			    />
		  	</div>
		  	
		  	<div class="row-fw-sb-ct-1" style="background-color:#E2E2E2; padding: 15px;">
			  	<div class="col-aw-sb-ct-0" style="">
			  		<div style="font-size: 32px;color:#67CE57">{{ xiabanTime }}</div>
			  		<div style="font-size: 18px;color: #ADC8A9;">{{ xbstatus }}</div>
			  	</div>
			  	<el-switch
			    	v-model="value2"
			    	active-color="#13ce66"
			    	inactive-color="#ff4949"
			    />
		    </div>
		  </div>
		  
		  <div class="row row-jc-sa" style="overflow:hidden;background-color:#E4E4E4;width:100%;height:120px;padding-top:20px;padding-bottom:20px;">
		  		<div @click="sbclock" style="background-color:#60C952;width:80px;height:80px;border-radius:80px;line-height:80px;text-align:center;color:white;">开始</div>
		  		<div @click="xbclock" style="background-color:#60C952;width:80px;height:80px;border-radius:80px;line-height:86px;text-align:center;color:white;">结束</div>
		  </div>
	  </div>
	</div>
	
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: select2-js" />
    
    <script th:inline="javascript">
	// 为给定 ID 的 user 创建请求

	//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

	
	Date.prototype.format = function (fmt) {
	    var o = {
	        "M+": this.getMonth() + 1, //月份
	        "d+": this.getDate(), //日
	        "h+": this.getHours(), //小时
	        "m+": this.getMinutes(), //分
	        "s+": this.getSeconds(), //秒
	        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
	        "S": this.getMilliseconds() //毫秒
	    };
	    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	    for (var k in o)
	        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	    return fmt;
	}
 
    var user = [[${LOGINNAME}]];
    var personId = [[${USERID}]];
    
    	const App = {
   		  data() {
   		    return {
   		      clockdatetime: new Date().format("yyyy-MM-dd"),
   		   	  clockdatetime2: new Date(),
   		      personProjectId: null,
   		      startDatetime:null,
   		      endDatetime:null,
   		   	  personIds:[],
   		      
   		      value2: true,
   		   	  projects: [],
   		   	  persions:[],
   		      persionsOptions:[],
   		   	  
   		   	  shangbanTime:"--:--",
   		   	  xiabanTime:"--:--",
   		    }
   		  },
   		  methods:{
   			sumbitClock(issb, clockdates){
   				let that = this;
   				axios.post('/system/clock/plclock', Qs.stringify({
		   			personProjectId: that.personProjectId,
		   			clockdatetime: that.clockdatetime,
		   			ids: that.personIds.toString(),
		   			issb: issb,
		   			clockdates,clockdates,
		   			operate: window.personId,
		   		  }))
		   	      .then(function (response) {
		   	        console.log(response);
		   	        
		   	     	alert("打卡成功");
		   	     
		   	        that.refreshClock();
		   	      })
		   	      .catch(function (error) {
		   	        console.log(error);
		   	      });	
   			},
   			refreshClock(){
   			  	let that = this;
  	   		  	axios.post('/system/clock/myclock', Qs.stringify({
		   			personProjectId: that.personProjectId,
		   			clockdatetime: that.clockdatetime,
		   			personId: window.personId
		   		  }))
		   	      .then(function (response) {
		   	        console.log(response);
		   	        if(response.data.code == 500){
		   	        	that.shangbanTime = "--:--";
		   	        	that.xiabanTime="--:--";
		   	        	return;
		   	        }
		   	        if(response.data.startDatetime != null){
		   	        	that.shangbanTime = response.data.startDatetime.split(" ")[1];
		   	        }else{
		   	        	that.shangbanTime = "--:--";
		   	        }
		   	     	if(response.data.endDatetime != null){
		   	     		that.xiabanTime = response.data.endDatetime.split(" ")[1];
		   	      	}else{
		   	      		that.xiabanTime="--:--";
		   	      	}
		   	      })
		   	      .catch(function (error) {
		   	        console.log(error);
		   	      });	
   			},
   			persionSelect(v){

   			},
   			persionFilter(query){		
   	            if (query == '' || query == ' ') {
   	                this.persionsOptions= this.persions;
   	            }
   	            else {
   	                let result = []
   	                this.persions.forEach(item => {
   	                	item = JSON.parse(JSON.stringify(item));
   	                	
   	                	let deptArr = item.dept.split(",");
   	                    if (deptArr[0].indexOf(query) != -1) {
							item.text = `${item.text}（${deptArr[0]}）`;
   	                    	result.push(item);
   	                    }else  if (deptArr[1].indexOf(query) != -1) {
							item.text = `${item.text}（${deptArr[1]}）`;
   	                    	result.push(item);
   	                    }else if(item.text.indexOf(query) != -1){
							item.text = `${item.text}（${deptArr[0]}，${deptArr[1]}）`;
   	                    	result.push(item);
   	                    }
   	                })
   	                this.persionsOptions= result
   	            }
   			},
   			dateSelect(v){

   			},
   			projectSelect(v){
   				
   			},
   			sbclock(v){
   				if(this.personProjectId == null){
   					alert("请选择打卡项目");
   					return;
   				}
   				//let sbd = new Date().format("yyyy-MM-dd hh:mm:ss");
   				let sbd = this.clockdatetime2.format("yyyy-MM-dd hh:mm");
   				this.sumbitClock(true, sbd);
   			},
   			xbclock(v){
   				if(this.personProjectId == null){
   					alert("请选择打卡项目");
   					return;
   				}
   				//let sbd = new Date().format("yyyy-MM-dd hh:mm:ss");
   				let sbd = this.clockdatetime2.format("yyyy-MM-dd hh:mm");
   				this.sumbitClock(false, sbd);
   			}
   		  },
   		computed: {
   		  sbstatus () {
   		    return (this.shangbanTime != "--:--" && this.shangbanTime != null) ? "已打卡" : "未打卡";
   		  },
   		  xbstatus () {
   		    return (this.xiabanTime != "--:--" && this.xiabanTime != null) ? "已打卡" : "未打卡";
   		  },
   		},
   		  created(){
   			  let that = this;
	   		  axios.get('/system/project/select2')
		   	      .then(function (response) {
		   	     	that.projects = response.data.results;
		   	      })
		   	      .catch(function (error) {
		   	        console.log(error);
		   	      });
	   		  
	   		  axios.get('/system/user/select2')
	   	      .then(function (response) {
	   	     	that.persions = response.data.results;
	   	     	that.persionsOptions = response.data.results;
	   	      })
	   	      .catch(function (error) {
	   	        console.log(error);
	   	      });
   		  }
   		}

        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>
</html>